<template>
  <div>
    <div class="dashboard-container">
      <div class="big-back-box">
        <div class="top">我的求助列表</div>
        <div style="height: 20px"></div>

        <el-card class="box-card" style="margin: 0 auto">
          <!-- 关键字搜索 -->
          <div style="height: 20px; color: #409eff; line-height: 20px">
            关键字查询
          </div>
          <br />
          <el-input
            v-model="searchTitle"
            placeholder="请输入标题关键字"
            style="width: 400px"
          ></el-input>
          <!-- <span>this.searchTitle:{{ this.searchTitle }}</span> -->
          <!-- <el-button
            style="margin-left: 28px"
            type="primary"
            @click="searchByName"
            >搜索</el-button
          > -->
          <br /><br />
          <!-- 条件搜索 -->
          <div style="height: 20px; color: #409eff; line-height: 20px">
            状态
          </div>
          <br />
          <el-form :inline="true" class="demo-form-inline">
            <!-- 状态 -->
            <el-select v-model="searchState" placeholder="请选择状态">
              <el-option
                v-for="item in stateList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-form-item>
              <!-- <span>this.searchState:{{ this.searchState }}</span> -->
            </el-form-item>
            <!-- 查询按钮 -->
            <el-form-item>
              <el-button type="primary" @click="searchByStateAndType"
                >查询</el-button
              >
            </el-form-item>
          </el-form>

          <!-- 列表 -->
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column label="编号" align="center" width="50">
              <template slot-scope="{ row }">
                <span>{{ row.id }}</span>          
              </template>
            </el-table-column>
            <el-table-column label="发起时间" align="center" width="100">
              <template slot-scope="{ row }">
                <span>{{ row.initiationTime }}</span>          
              </template>
            </el-table-column>
            <el-table-column label="求助标题" align="center" width="225">
              <template slot-scope="{ row }">
                <span>{{ row.title }}</span>          
              </template>
            </el-table-column>
            <el-table-column label="类型" align="center" width="100">
              <template slot-scope="{ row }">
                <span>{{ row.type }}</span>          
              </template>
            </el-table-column>
            <el-table-column label="状态" align="center" width="150">
              <template slot-scope="{ row }">
                <span>{{ row.state }}</span>          
              </template>
            </el-table-column>
            <el-table-column label="接单服务商" align="center" width="125">
              <template slot-scope="{ row }">
                <span>{{ row.enterpriseName }}</span>          
              </template>
            </el-table-column>
            <el-table-column label="抢单人数" align="center" width="100">
              <template slot-scope="{ row }">
                <span>{{ row.orderGrabbingNumber }}</span>          
              </template>
            </el-table-column>

            <el-table-column label="操作" align="center" width="200">
              <template slot-scope="{ row }">
                <router-link
                  :to="{ path: '/lawHelp/customerReadMore', query: row }"
                >
                  <el-button type="text">详情</el-button>
                </router-link>
                <!-- 在此处要加上依据不同状态出现不同按钮的功能 -->
                <!-- 0.“所有”：（根据不同条目显示不同按钮） -->
                <!-- 1.“待发布”：编辑、提交发布、删除 -->
                <router-link
                  :to="{ path: '/lawHelp/customerEditHelp', query: row }"
                >
                  <el-button
                    v-if="row.state == 'waitingForReleased'"
                    type="text"
                    >编辑</el-button
                  >
                </router-link>
                <el-button
                  v-if="row.state == 'waitingForReleased'"
                  type="text"
                  @click="submitHelp(row.id)"
                  >提交</el-button
                >
                <el-button
                  v-if="row.state == 'waitingForReleased'"
                  type="text"
                  @click="deleteHelp(rowId)"
                  >删除</el-button
                >
                <!-- 2.“审核中”：撤回 -->
                <el-button
                  v-if="row.state == 'underReview'"
                  type="text"
                  @click="retreatHelp(row.id)"
                  >撤回</el-button
                >
                <!-- 3.“抢单中”：(无) -->
                <!-- 4.“已接单”：（无） -->
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <pagination
            :total="total"
            :page.sync="listQuery.pageNum"
            :limit.sync="listQuery.pageSize"
            page-sizes="[5,10]"
            @pagination="getList"
          />
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
// 分页功能
import Pagination from "@/components/Pagination";
// 获取当前登录账户信息
import { returnUserInformation } from "@/api/user.js";

// 采买方获取法律求助表
import { getLegalRecourseListToBuyer } from "@/api/lawHelp.js";
// 发布法律求助
import { putOnLegalRecourse } from "@/api/lawHelp.js";
// 修改法律求助信息
import { modifyLegalRecourse } from "@/api/lawHelp.js";
// 删除法律求助
import { deleteLegalRecourse } from "@/api/lawHelp.js";
// 取消发布法律求助
import { takeDownLegalRecourse } from "@/api/lawHelp.js";

export default {
  components: { Pagination }, // 分页
  data() {
    return {
      // 分页
      total: 0,
      listQuery: {
        pageNum: 1,
        pageSize: 5,
      },
      // 搜索
      searchTitle: "",
      searchState: "",
      searchType: "",
      // 选择器下拉选项
      // 状态
      stateList: [
        {
          value: "",
          label: "所有求助",
        },
        {
          value: "waitingForReleased",
          label: "待发布",
        },
        {
          value: "underReview",
          label: "审核中",
        },
        {
          value: "inOrderGrabbing",
          label: "抢单中",
        },
        {
          value: "received",
          label: "已接单",
        },
      ],
      // 类型
      typeList: [
        {
          value: "",
          label: "所有类型",
        },
        {
          value: "typeA",
          label: "类型A",
        },
        {
          value: "typeB",
          label: "类型B",
        },
      ],
      // 数据列表
      tableData: [],
    };
  },
  // 调用初始化，一进页面就执行。
  mounted() {
    console.log("mounted()");
    this.init();
  },
  methods: {
    // 初始化
    init() {
      this.displayList();
    },
    // 分页展示（按条件）得到的数据列表
    displayList() {
      let data = {
        // 注意：
        // 按后端接口要求，这里要定义一个拥有完整属性的求助类，
        // 其中只有state和type作为双条件查询依据，
        // 剩下的属性按对应格式设为空值（或任意值，反正后端不做条件查询）即可。
        buyerId: null,
        content: "",
        enterpriseName: "",
        id: null,
        initiationTime: "",
        orderGrabbingNumber: 0,
        region: "",
        serviceId: null,
        title: this.searchTitle,
        state: this.searchState,
        type: this.searchType,
      };
      // 调用端口根据条件查询分页显示
      getLegalRecourseListToBuyer(
        data,
        this.listQuery.pageNum,
        this.listQuery.pageSize
      ).then((resp) => {
        this.tableData = resp.data.legalRecourseList.content;
        this.total = resp.data.legalRecourseList.totalSize;
      });
    },
    // 分页
    getList(pageObj) {
      console.log(pageObj);
      // 获取数据
      this.listQuery.pageNum = pageObj.page;
      this.listQuery.pageSize = pageObj.limit;
      this.init();
    },
    // 根据类型查询
    searchByStateAndType() {
      console.log("searchByStateAndType()");
      this.displayList();
    },
    // 提交求助
    submitHelp(rowId) {
      alert("submitHelp(rowId): rowId: " + rowId);
      putOnLegalRecourse(rowId).then((resp) => {
        // 确定已读后显示未读列表
        this.init();
      });
    },
    // 删除弹窗
    // openDelete(rowId) {
    //   this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning",
    //   })
    //     .then(() => {
    //       this.$message({
    //         type: "suc cess",
    //         message: "删除成功!",
    //       });
    //     })
    //     .catch(() => {
    //       this.$message({
    //         type: "info",
    //         message: "已取消删除",
    //       });
    //     });
    //   console.log("this.$message.message: " + this.$message.message);
    //   // deleteHelp(rowId);  // 删除求助
    // },
    // 删除求助
    deleteHelp(rowId) {
      alert("submitHelp(rowId): rowId: " + rowId);
      deleteLegalRecourse(rowId).then((resp) => {
        console.log("deleteLegalRecourse(rowId) 删除求助");
        // 确定已读后显示未读列表
        this.init();
      });
    },
    // 取消发布求助
    retreatHelp(rowId) {
      takeDownLegalRecourse(rowId).then((resp) => {
        console.log("takeDownLegalRecourse(rowId) 删除求助");
        // 确定已读后显示未读列表
        this.init();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
// 页头LOGO
.top {
  height: 50px;
  font-size: 30px;
  text-align: center;
  line-height: 50px;
}

// 大盒子
.big-back-box {
  width: 1100px;
  margin: 0 auto;
}

// 原框架自带
.dashboard {
  &-container {
    margin-top: 30px;
    // margin-left: 30px;
    // margin-right: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>